<div class="col-md-12">
    <div class="box grid-box">
        <div class="box-header with-border">
            <div class="container-fluid">
                <div class="col-md-12>
                    <!-- resources/views/admin/finance_chart.blade.php -->
                    <div class=" card
                ">
                <div id="annualChart" style="width:100%; height:400px;"></div>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading" style="font-size:20px;font-weight:500">总收入</div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="panel-body">
                            等待审核: <span class="not_audit" style="font-size:20px">{{ $data['not_audit'] }}</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="panel-body">
                            通过审核: <span class="success" style="font-size:20px">{{ $data['success'] }}</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="panel-body">
                            驳回: <span class="refuse" style="font-size:20px">{{ $data['refuse'] }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading" style="font-size:20px;font-weight:500">总支出</div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="panel-body">
                            等待审核: <span class="not_audit2" style="font-size:20px">{{ $data['not_audit2'] }}</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="panel-body">
                            通过审核: <span class="success2" style="font-size:20px">{{ $data['success2'] }}</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="panel-body">
                            驳回: <span class="refuse2" style="font-size:20px">{{ $data['refuse2'] }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading" style="font-size:20px;font-weight:500">工资支出</div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="panel-body">
                            等待审核: <span class="not_audit1" style="font-size:20px">{{ $data['not_audit1'] }}</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="panel-body">
                            通过审核: <span class="success1" style="font-size:20px">{{ $data['success1'] }}</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="panel-body">
                            驳回: <span class="refuse1" style="font-size:20px">{{ $data['refuse1'] }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading" style="font-size:20px;font-weight:500">
                    总余额
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel-body">
                            <span style="font-size:20px">{{ $data['success'] }}</span><span style="font-size:12px">(总收入)</span> -
                            <span style="font-size:20px">{{ $data['success2'] }}</span><span style="font-size:12px">(总支出)</span> -
                            <span style="font-size:20px">{{ $data['success1'] }}</span><span style="font-size:12px">(工资支出)</span> =
                            <span style="font-size:20px">{{ $data['balance'] }}</span><span style="font-size:12px">(总余额)</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<script>
    $(function () {
        const chart = echarts.init(document.getElementById('annualChart'));
        const option = {
            title: {text: '年度收支趋势图', left: 'center'},
            tooltip: {trigger: 'axis'},
            legend: [{
                name: "收入",
                top: 'bottom',
                icon: 'rect',
                color: '#00FF00', // 设置颜色
                textStyle: {
                    color: '#00FF00', // 文字颜色
                    fontSize: 14 // 文字大小
                }

            }, {
                name: "支出",
                top: 'bottom',
                icon: 'rect',
                color: '#FF0000', // 设置颜色
                textStyle: {
                    color: '#FF0000', // 文字颜色
                    fontSize: 14 // 文字大小
                }
            }, {
                name: "工资支出",
                top: 'bottom',
                icon: 'rect',
                color: '#FF0000', // 设置颜色
                textStyle: {
                    color: '#000080', // 文字颜色
                    fontSize: 14 // 文字大小
                }
            }],
            // legend: { data: ['收入', '支出'], top: 'bottom', color:['#00FF00', '#FF0000'] },
            xAxis: {
                type: 'category',
                data: @json($data['months']),  // 如 ['2024-01', '2024-02', ...]
                axisLabel: {rotate: 45}
            },
            yAxis: {type: 'value'},
            series: [
                {
                    name: '收入',
                    type: 'line',
                    data: @json($data['income']),
                    itemStyle: {color: '#00FF00'},
                    smooth: true
                },
                {
                    name: '支出',
                    type: 'line',
                    data: @json($data['expense']),
                    itemStyle: {color: '#FF0000'},
                    smooth: true
                },
                {
                    name: '工资支出',
                    type: 'line',
                    data: @json($data['wages']),
                    itemStyle: {color: '#000080'},
                    smooth: true
                }
            ]
        };
        chart.setOption(option);
    });
</script>

